<template>
	<view class="container">
		<YanxueTab :list="tabList" @change="tabChange" :current="currentIndex" inActiveWidth="184rpx"></YanxueTab>
		<u-tabs-swiper
			v-if="currentIndex == 0"
			ref="uTabs"
			:fontSize="tabOptions['font-size']"
			:activeColor="tabOptions['active-color']"
			:inactiveColor="tabOptions['inactive-color']"
			:barWidth="tabOptions['bar-width']"
			:bgColor="tabOptions['bg-color']"
			:gutter="tabOptions.gutter"
			:list="list"
			:current="current"
			@change="tabsChange"
			:is-scroll="false"
			swiperWidth="750"
		/>
		<!-- <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
      <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
        <scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom"> -->
		<view class="box">
			<view class="info">
				<view class="yan-list">
					<view class="list_item" v-for="(item, index) in dataList" :key="index">
						<view class="yan-top">
							<image :src="item.coverImage" mode="widthFix" class="list_img"></image>
							<view class="list_text">
								<view class="title">{{ item.goodsName }}</view>
								<view class="num">
									<view>{{ item.projectDate }}</view>
									<view v-if="item.status == 2" class="yaoqing" @click="captureAndSave(item)"
										>生成邀请函<view class="trangle"></view
									></view>
								</view>
							</view>
						</view>
						<view class="yan-bottom">
							<view class="yarn_left">
								<view class="avator">
									<image
										v-for="(img, index) in item.imgs"
										:key="index"
										:src="img"
										mode="widthFix"
										class="avator_img"
									></image>
								</view>
								<view class="num">
									<text>{{ item.joinAmount }}人已报名</text>
								</view>
							</view>
							<view class="btn" @click="toFunc(item)">
								<!-- <text>{{ userInfo.userRole == 0 ? "加入我们" : "查看详情" }}</text> -->
								<text>{{ item.status == 1 ? '进行中' : item.status == 2 ? '报名中' : '往期回顾' }}</text>
								<view class="trangle"></view>
							</view>
						</view>
					</view>
					<view v-if="dataList.length == 0" style="width: 100%; text-align: center; margin-top: 200rpx">
						<image
							style="width: 500rpx"
							mode="widthFix"
							src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
						/>
					</view>
				</view>
			</view>
		</view>
		<!-- </scroll-view>
      </swiper-item>
    </swiper> -->
		<!-- <view class="btn_bottom" v-if="currentIndex == 0" @click="toaddYanxue">
      <view class="icon_plus"> + </view>
      <view class="btn_text"> 发起更多我的研学</view>
    </view> -->
		<view class="container1" v-if="share">
			<image
				class="img"
				src="https://yanxue-1300739304.cos.ap-shanghai.myqcloud.com/images/1733035911372%E5%9B%BE%E5%B1%82%206%20%E6%8B%B7%E8%B4%9D@2x.png"
			/>
			<view class="contentbox">
				<view class="title">邀请好友加入自然为师</view>
				<view class="title2">你与好友都可获得佣金</view>
				<canvas canvas-id="myCanvas" style="width: 702rpx; height: 1100rpx; margin: 20rpx auto"></canvas>
				<view class="btnbox">
					<!-- <view class="no" @click="surveyGoodsFunc(1)">不感兴趣</view> -->
					<view class="yes" @click="savePoster()">保存到手机</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import YanxueTab from '@/components/yanxue_tab'
import ListMixin from '@/mixins/listMixin'
import request from '@/utils/request'
import indexApi from '@/api/yanxue/yanxue'
import insteresting from '@/pagesA/yanxue/insteresting'
export default {
	components: {
		YanxueTab,
		insteresting
	},
	//   mixins: [ListMixin],
	data() {
		return {
			share: false,
			list: [
				{ name: '全部', type: 0 },
				{ name: '进行中', type: 1 },
				{ name: '报名中', type: 2 },
				{ name: '已完成', type: 3 }
			],
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			tabOptions: {
				'font-size': 24,
				'active-color': '#F95513',
				'inactive-color': '#656565',
				'bar-width': 106,
				'bg-color': '#F6F6F6',
				gutter: 28
			},
			currentIndex: 0,
			dataList: [],

			tabList: [
				{
					default: {
						title: '我的研学',
						icon: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png',
						width: 80,
						height: 60
					},
					active: {
						title: '我的研学',
						// des: "近期12期",
						icon: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png',
						width: 92,
						height: 68
					}
				},
				{
					default: {
						title: '往期研学',
						icon: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png',
						width: 80,
						height: 60
					},
					active: {
						title: '往期研学',
						// des: "近期12期",
						icon: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png',
						width: 92,
						height: 68
					}
				}
				// {
				//   default: {
				//     title: "往期研学",
				//     icon: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png",
				//     width: 80,
				//     height: 60,
				//   },
				//   active: {
				//     title: "往期研学",
				//     des: "近期12期",
				//     icon: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png",
				//     width: 92,
				//     height: 68,
				//   },
				// },
			],
			userInfo: {}
		}
	},
	onLoad(options) {
		if (options.type) {
			this.swiperCurrent = Number(options.type)
			this.current = Number(options.type)
		}
		this.getList()
		this.userInfo = this.$store.state.user.userInfo
	},
	methods: {
		toYaoqing(item) {
			console.log(item)
		},

		async captureAndSave({ id }) {
			this.share = true
			const response = await indexApi.getProjectInviteInfo({ id })
			console.log(response)
			uni.showLoading({
				title: '正在生成海报'
			})
			// 绘制图形（可选
			let list = [
				'https://yanxue-1300739304.cos.ap-shanghai.myqcloud.com/images/1733037503622111.png',
				response.result.coverImage,
				response.result.qrCode,
				this.userInfo.headPic
			]
			let fileList = []
			for (let index = 0; index < list.length; index++) {
				const element = list[index]
				const item = await uni.getImageInfo({ src: element })
				fileList.push(item)
			}
			// 获取 Canvas 上下文
			const ctx = uni.createCanvasContext('myCanvas')
			ctx.fillStyle = '#FFF'
			ctx.strokeStyle = '#303030'
			this.roundedRect(ctx, 0, 30, 365, 540, 20) // 填充圆角 x, y, width, height, radius
			ctx.fill()
			// ctx.lineWidth = 2;
			// ctx.strokeRect(16, 100, 343, 180);
			// ctx.fillRect(0, 0, 300, 400); // 填充矩形

			ctx.font = 'bold 22px Arial'
			ctx.fillStyle = '#000000'
			ctx.setFontSize(22)
			ctx.setTextAlign('center') // 水平居中
			ctx.fillText(this.userInfo.nickName, 365 / 2, 130) // 文本内容、X坐标、Y坐标

			ctx.font = 'normal 15px Arial'
			ctx.fillStyle = '#000000'
			ctx.setFontSize(15)
			ctx.setTextAlign('center') // 水平居中
			ctx.fillText('Hello，我们正准备去【' + response.result.goodsName + '】，一起出发呀', 365 / 2, 170) // 文本内容、X坐标、Y坐标

			ctx.font = 'normal 15px Arial'
			ctx.fillStyle = '#000000'
			ctx.setFontSize(12)
			ctx.setTextAlign('center') // 水平居中
			ctx.fillText('微信扫码即可加入自然为师', 365 / 2, 546) // 文本内容、X坐标、Y坐标

			console.log(fileList)
			fileList.map((res, idx) => {
				let data = res[1]
				if (idx == 3) {
					const imgWidth = 106 // 图片的宽
					const imgHeight = 106 // 图片的高
					const imgX = (365 - imgWidth) / 2 // 图片的X坐标，使其居中
					const imgY = 0 // 图片的Y坐标
					// 绘制圆形路径
					ctx.beginPath()
					ctx.arc(imgX + imgWidth / 2, imgY + imgHeight / 2, Math.min(imgWidth, imgHeight) / 2, 0, 2 * Math.PI)
					ctx.strokeStyle = 'blue' // 设置描边颜色
					ctx.lineWidth = 1 // 设置描边宽度
					ctx.stroke() // 描边

					// 如果你想填充圆形
					// ctx.fillStyle = "yellow"; // 设置填充颜色
					ctx.fill()
					ctx.clip() // 裁剪路径外的区域

					// 绘制图片
					ctx.drawImage(data.path, imgX, imgY, imgWidth, imgHeight)
					// ctx.draw();
				}
				if (idx == 2) {
					ctx.drawImage(data.path, 365 / 2 - 40, 437, 85, 85)
				}
				if (idx == 1) {
					const canvasWidth = 304
					const canvasHeight = 186
					ctx.drawImage(data.path, 30, 230, canvasWidth, canvasHeight)
				}
				if (idx == 0) {
					const canvasWidth = 345
					const canvasHeight = 227
					ctx.drawImage(data.path, 10, 210, canvasWidth, canvasHeight)
				}
			})
			ctx.draw(false)
			uni.hideLoading()
		},
		roundedRect(ctx, x, y, width, height, radius) {
			ctx.beginPath()
			ctx.moveTo(x + radius, y)
			ctx.lineTo(x + width - radius, y)
			ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
			ctx.lineTo(x + width, y + height - radius)
			ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
			ctx.lineTo(x + radius, y + height)
			ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
			ctx.lineTo(x, y + radius)
			ctx.quadraticCurveTo(x, y, x + radius, y)
			ctx.closePath()
		},
		savePoster() {
			const that = this
			wx.canvasToTempFilePath(
				{
					canvasId: 'myCanvas',
					success(res) {
						const tempFilePath = res.tempFilePath
						wx.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success() {
								wx.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								})
							},
							fail() {
								wx.showToast({
									title: '保存失败，请检查权限',
									icon: 'none',
									duration: 2000
								})
							}
						})
					},
					fail() {
						wx.showToast({
							title: '生成海报失败',
							icon: 'none',
							duration: 2000
						})
					}
				},
				this
			)
		},
		toFunc(item) {
			//按钮功能
			if (item.status == 3) {
				this.$navTo('pagesA/yanxue/work_detail?id=' + item.id)
				return
			}
			this.$navTo('pagesA/yanxue/detail?id=' + item.id)
		},
		toaddYanxue() {
			this.$navTo('pages/yanxue/addyanxue')
		},
		tabChange(index) {
			this.currentIndex = index
			this.getList()
		},
		getList() {
			// 我的研学
			let API = indexApi.getgoodsList
			API({ page: 1, rows: 99, type: this.currentIndex == 0 ? this.current : 3 }).then(res => {
				console.log(res)
				this.dataList = res.result.list
			})
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index
			this.current = index
			this.dataList = []
			this.getList()
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx
			if (this.$refs.uTabs.setDx) {
				this.$refs.uTabs.setDx(dx)
			}
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current
			this.$refs.uTabs.setFinishCurrent(current)
			this.swiperCurrent = current
			this.current = current
			//   this.orderList = [];
			//   this.getOrderList();
		},
		// scroll-view到底部加载更多
		onreachBottom() {}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f5f5f5;
}

.box {
	padding: 0 24rpx 100rpx;
}

.info {
	// margin-top: 46rpx;
	padding-top: 28rpx;

	.info-des {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.label {
			position: relative;

			text {
				font-family: HarmonyOS Sans SC;
				font-weight: 900;
				font-size: 38rpx;
				color: #000000;
				z-index: 100;
			}

			.shadow {
				margin-top: -12rpx;
				z-index: 99;
				width: 100%;
				height: 8rpx;
				background: #a2ff00;
			}
		}

		.des {
			display: flex;
			align-items: center;

			text {
				font-family: HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				transform: scale(0.916667);
				color: #747474;
			}

			.point {
				position: relative;
				margin-left: 10rpx;
				width: 20rpx;
				height: 20rpx;
				background-color: #a2ff00;
				border-radius: 50%;

				.trangle {
					position: absolute;
					top: 4rpx;
					left: 4rpx;
					// transform: translate(-50%, -50%);
					width: 0;
					height: 0;
					border-left: 8rpx solid transparent;
					border-right: 8rpx solid transparent;
					border-bottom: 13.856rpx solid #fff;
					transform: rotate(90deg);
				}
			}
		}
	}

	.yan-list {
		margin-top: 20rpx;

		.list_item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			margin-right: 12rpx;

			.yan-top {
				.list_img {
					width: 100%;
					// height: 268rpx;
					border-radius-top-left: 20rpx;
					border-radius-top-right: 20rpx;
					vertical-align: bottom;
				}

				.list_text {
					padding: 14rpx 24rpx 0 24rpx;
					height: 120rpx;
					background: linear-gradient(0deg, #facc22 0%, #f95513 100%);
					border-radius: 0px 0px 20rpx 20rpx;

					.title {
						font-family: HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #ffffff;
					}

					.num {
						margin-top: 16rpx;
						font-family: HarmonyOS Sans SC;
						font-size: 24rpx;
						color: #ffffff;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.yaoqing {
							width: 182rpx;
							height: 44rpx;
							background: #ffffff;
							border-radius: 22rpx;
							line-height: 44rpx;
							text-align: center;
							font-family: HarmonyOS Sans SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #f95814;
							display: flex;
							justify-content: space-evenly;
							align-items: center;
							.trangle {
								width: 0;
								height: 0;
								border-left: 8rpx solid transparent;
								border-right: 8rpx solid transparent;
								border-bottom: 14.248rpx solid #f95814;
								transform: rotate(90deg);
							}
						}
					}
				}
			}

			.yan-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10rpx;

				.yarn_left {
					display: flex;
					align-items: center;

					.avator {
						margin-top: 20rpx;

						.avator_img:not(:first-child) {
							margin-left: -22rpx;
						}

						.avator_img {
							width: 62rpx;
							height: 62rpx;
							border-radius: 50%;
						}
					}

					.num {
						width: 146rpx;
						height: 40rpx;
						background: #e9e9f0;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 18rpx;
						margin-left: 18rpx;

						text {
							font-family: HarmonyOS Sans SC;
							font-size: 24rpx;
							color: #353535;
							text-align: center;
							line-height: 40rpx;
							transform: scale(0.75);
						}
					}
				}

				.btn {
					width: 166rpx;
					height: 72rpx;
					background: #a2ff00;
					border-radius: 36rpx;
					font-family: HarmonyOS Sans SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #030400;
					line-height: 72rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;

					.trangle {
						// left: 1rpx;
						// transform: translate(-50%, -50%);
						width: 0;
						height: 0;
						border-left: 8rpx solid transparent;
						border-right: 8rpx solid transparent;
						border-bottom: 14.248rpx solid #000;
						transform: rotate(90deg);
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.yan-list_v2 {
		margin-top: 20rpx;

		.list_item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.yan-left {
				.list_img {
					width: 152rpx;
					height: 184rpx !important;
					border-radius: 8rpx;
					vertical-align: bottom;
					object-fit: cover;
				}
			}

			.yan-center {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 20rpx;
				width: 100%;

				.list_text {
					.title {
						font-family: HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 28rrpx;
						color: #000000;
					}

					.num {
						width: 146rpx;
						height: 40rpx;
						background: #e9e9f0;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 18rpx;

						text {
							font-family: HarmonyOS Sans SC;
							font-size: 24rpx;
							color: #353535;
							text-align: center;
							line-height: 40rpx;
							transform: scale(0.75);
						}
					}

					.price {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.price_num {
							font-family: HarmonyOS Sans SC;
							font-weight: bold;
							font-size: 48rpx;
							color: #f95513;
							margin-right: 4rpx;
						}

						.text {
							font-family: HarmonyOS Sans SC;
							font-size: 24rpx;
							color: #f95513;
							transform: scale(0.833333);
						}
					}
				}

				.yan-right {
					.rank {
						// width: 110rpx;
						// height: 56rpx;
						// background: #F95513;
						// border-radius: 20rpx 20rpx 0px 0px;
						// margin: 0 auto;
						margin-bottom: 48rpx;
						position: relative;

						image {
							width: 172rpx;
							height: 74rpx;
						}

						.rank_main {
							font-family: HarmonyOS Sans SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #ffffff;
							text-align: center;
							line-height: 56rpx;
							position: absolute;
							bottom: 18rpx;
							left: 48rpx;
						}

						// .shadow {
						//     margin-top: -12rpx;
						//     width: 100%;
						//     height: 8rpx;
						//     background: #A2FF00;
						// }
					}

					.btn {
						width: 166rpx;
						height: 72rpx;
						background: #a2ff00;
						border-radius: 36rpx;
						font-family: HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #030400;
						line-height: 72rpx;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;

						.trangle {
							width: 0;
							height: 0;
							border-left: 8rpx solid transparent;
							border-right: 8rpx solid transparent;
							border-bottom: 14.248rpx solid #000;
							transform: rotate(90deg);
							margin-left: 8rpx;
						}
					}
				}
			}
		}
	}
}
.btn_bottom {
	width: 210px;
	height: 33px;
	background: #a2ff00;
	border-radius: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: calc(env(safe-area-inset-bottom) - 20px);
	left: calc(50% - 105.5px);
	.icon_plus {
		width: 20px;
		height: 20px;
		border-radius: 20px;
		background-color: #161b07;
		text-align: center;
		color: #9ffc0b;
		font-size: 20px;
		font-weight: bold;
		line-height: 17.5px;
	}
	.btn_text {
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 16px;
		color: #000000;
		margin-left: 10px;
	}
}
.container1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	overflow: hidden;
	//   background-image: url("https://yanxue-1300739304.cos.ap-shanghai.myqcloud.com/images/1733035911372%E5%9B%BE%E5%B1%82%206%20%E6%8B%B7%E8%B4%9D@2x.png");
	background: #17191a;
	background-repeat: no-repeat;
	.img {
		width: 100%;
		height: 100vh;
	}
	.contentbox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		.title {
			height: 58rpx;
			text-align: center;
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 60rpx;
			color: #a2ff00;
			margin: 30rpx auto 34rpx auto;
		}
		.title2 {
			text-align: center;
			height: 28rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #ffffff;
		}
		.btnbox {
			margin-top: 46rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.no {
				width: 226rpx;
				height: 94rpx;
				text-align: center;
				line-height: 94rpx;
				background: #e9e9f0;
				border-radius: 46rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}
			.yes {
				width: 395rpx;
				height: 94rpx;
				background: #a2ff00;
				border-radius: 46rpx;
				text-align: center;
				line-height: 94rpx;
				margin-left: 26rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}
		}
	}
}
</style>
